<!--
 * @Description: 
 * @Author: xuzp4
 * @Date: 2022-12-12 16:59:53
 * @LastEditors: xuzp4
 * @LastEditTime: 2022-12-15 14:01:12
 * @FilePath: \vue_demo\src\view\threejs\debugui.vue
-->
<template>
  <canvas class="webgl"></canvas>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import gsap from "gsap";
import * as dat from "dat.gui";
export default {
  mounted() {
    /**
     * debug
     */
    const gui = new dat.GUI({closed:true});
    // gui.hide()
    const parameters = {
      color:0xff0000,
      spin:() =>{
        gsap.to(mesh.rotation,{duration:1,y:mesh.rotation.y+10})
      }
    }
    gui.addColor(parameters,'color').onChange((e) => {
      material.color.set(parameters.color)
    })
    gui.add(parameters,'spin')

    window.addEventListener("resize", () => {
      // update sizes
      sizes.width = window.innerWidth;
      sizes.height = window.innerHeight;
      // update camera
      camera.aspect = sizes.width / sizes.height;
      camera.updateProjectionMatrix();
      // update renderer
      renderer.setSize(sizes.width, sizes.height);
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    });
    window.addEventListener("dblclick", () => {
      const fullscreenElement =
        document.fullscreenElement || document.webkitFullscreenElement;
      if (!fullscreenElement) {
        if (canvas.requestFullscreen) {
          canvas.requestFullscreen();
        } else if (canvas.webkitRequestFullscreen) {
          canvas.webkitRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    });
    const canvas = document.querySelector(".webgl");
    // Scene
    const scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry(1, 1, 1);

    const material = new THREE.MeshBasicMaterial({ color:0xff0000});
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    // debug
    gui.add(mesh.position,'y').min(-3).max(3).step(0.01).name('elevation')
    gui.add(mesh,'visible')
    gui.add(material,'wireframe')
    
    const sizes = {
      width: 800,
      height: 600,
    };
    // Camera
    const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
    camera.position.z = 3;
    camera.lookAt(mesh.position);
    scene.add(camera);

    // constrols
    const controls = new OrbitControls(camera, canvas);
    // controls.enabled = false;
    controls.enableDamping = true;
    // Renderer
    const renderer = new THREE.WebGLRenderer({
      canvas,
    });
    renderer.setSize(sizes.width, sizes.height);
    renderer.render(scene, camera);

    // animation
    const tick = () => {
      controls.update();
      renderer.render(scene, camera);
      window.requestAnimationFrame(tick);
    };
    tick();
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.webgl {
  position: fixed;
  top: 0;
  left: 0;
  outline: none;
}
</style>